<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商云信息科技有限公司欢迎你</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<style type="text/css">
/*
#header {
    width: 100%;
    padding:auto;
}
#header .logo {
    position: relative;
    top: 15px;
    float: left;
}
html, body{
    width: auto;
    height: auto;
    position: relative;
    margin:0px;
}
html {
    display: block;
}
a {
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-style: initial;
    text-decoration-color: initial;
    font-size: 16px;
}
ul, li {
    list-style: none;
    list-style-type: none;
    list-style-position: initial;
    list-style-image: initial;
}
div{
	display:block;
}
#header .nav li {
    float: left;
    font-size: 20px;
    padding: 0 15px;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
}
#header .content-h {
    margin: 0 auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#header .nav {
    float: left;
    margin-left: 28px;
}
#header .phone {
    float: right;
}
#header .phone li {
    float: left;
    font-size: 20px;
    padding: 0 15px;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
}
*/
#footer{
	margin-top:0;
}


#image img{
	height:auto;
	width:100%;
}

/*
a {
    background-color: transparent;
}
a {
    text-decoration: none;
    font-size: 16px;
}
*/

#footer {
    width: 100%;
    border-top: 8px solid #0fa0e6;
    border-top-width: 8px;
    border-top-style: solid;
    border-top-color: #0fa0e6;
    background: #0fa0e6;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #333;
    margin:0;
    position: relative;
	}
	#footer .f-label .label-bottom {
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 30px 0 50px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}
#footer .f-label .label-bottom .label-bottom-l {
    float: left;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}
#footer .f-label .label-bottom .label-bottom-r {
    float: right;
    font-size: 14px;
    color: #fff;
}
#_jvs_bottomimagelarge_anquan {
    display: inline-block;
    float: right;
    position: relative;
    bottom: 4px;
    left: -7px;
}

html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
a{text-decoration:none;color:#fff;blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{background-color:#fff;color:#fff;min-height:100%;height:auto!important;height:100%}
body,button,input,select,textarea,h1,h2,h3,h4,h5,h6{font:14px "微软雅黑","Microsoft Yahei",arial,simhei}
table{border-collapse:collapse;border-spacing:0}
img,fieldset{border:0;vertical-align:middle}
ul,li,ol{list-style:none}
em,i{font-style:normal}
iframe{display:block}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.cont{width:1200px;margin:0px auto;}
.textcent{ text-align:center}

.head {height: 45px;width: 100%; }
.yanse{ background:#0fa0e6; width:50%; position: absolute;  right:0px;z-index:-1px; float:right;height:45px }
.head-left {float: left;height: 41px;width: 135px;margin-left: 47px;padding-top: 0px;}
/*nav导航盒子*/
.nav{width:730px;height:45px;line-height:45px;text-align:center;font-size:16px;position:relative;background:#0fa0e6  no-repeat left bottom ;padding-top:0px;  padding-left:150px;float:right; font-weight:bold; font-family:"微软雅黑";z-index:1000}
/*nav-main*/
ul.nav-main{width:100%;height:100%;list-style-type:none}
ul.nav-main span{display:inline-block;margin-left:18px;width:12px;height:9px; background:url(../images/sj1.png) no-repeat center center}

/*图标向上旋转*/
.hover-up{transition-duration:.5s;transform:rotate(180deg);-webkit-transform:rotate(180deg); }
/*图标向下旋转*/
.hover-down{transition-duration:.5s;transform:rotate(0);-webkit-transform:rotate(0)}
/*导航条设置*/
ul.nav-main>li{width:133px;height:100%;display:block;float:left;color:#fff;margin-right:1px;cursor:pointer}
ul.nav-main>li:hover{background:#fff ; color:#0fa0e6 }
ul.nav-main>li:hover span{ background:url(../images/sg3.jpg)  no-repeat center center; z-index:100000 }
/*隐藏盒子设置*/
div.hidden-box{width:133px;position:absolute;display:none;background:#315565 url(../images/sj2.png) no-repeat  top center;top:45px;filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}
.hidden-box>ul{list-style-type:none;color:#fff;cursor:pointer; padding-top:12px;padding-bottom:15px}
.hidden-box>ul li{ line-height:30px; height:30px; font-weight:500}
/*.hidden-box li:hover{background:#643519;color:#fff}*/

/*隐藏盒子位置设置*/
.hidden-loc-index{left:284px}
.hidden-loc-us{left:417px}
.hidden-loc-info{left:550px}
.box04{left:683px}


</style>
<style type="text/css">
        #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left;width:600px;height:400px;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
        #float-right{position:absolute; right:0; top:200px; z-index:200;}
		#float-right a{ width:100%; height:40px; line-height:px40; display:block;background:yellow;}
		#float-right a:hover{ color:#fff; background:#c40000; text-decoration:none;}
		#float-right a img{
			width:100%;
			height:auto;
		}
        
    </style>
    <script type="text/javascript" src="js/jquery.1.10.2.js"></script>
    <script type="text/javascript">
    	$(function(){
			$("#aFloatTools_Show").click(function(){
				$('#divFloatToolsView').animate({width:'show',opacity:'show'},100,function(){$('#divFloatToolsView').show();});
				$('#aFloatTools_Show').hide();
				$('#aFloatTools_Hide').show();				
			});
			$("#aFloatTools_Hide").click(function(){
				$('#divFloatToolsView').animate({width:'hide', opacity:'hide'},100,function(){$('#divFloatToolsView').hide();});
				$('#aFloatTools_Show').show();
				$('#aFloatTools_Hide').hide();	
			});
		});
    	$(function(){
    		var wHeight = $(window).height(); //获取浏览器窗口宽度
    		var wWidth = $(window).width(); //获取浏览器窗口高度
    		$('#lanrenzhijia .list').height($('.lanren').length*wHeight);
    		$('#lanrenzhijia,#lanrenzhijia .main,#lanrenzhijia .lanren').height(wHeight).width(wWidth);
    		$(window).resize(function(){
    			var wHeight = $(window).height(); //获取浏览器窗口宽度
    			var wWidth = $(window).width(); //获取浏览器窗口高度
    			$('#lanrenzhijia .list').height($('.lanren').length*wHeight);
    			$('#lanrenzhijia,#lanrenzhijia .main,#lanrenzhijia .lanren').height(wHeight).width(wWidth);
    		});
    		// 点击定位
    		$('#float-right a').on('click',function(){
    			var index = $(this).index();
    			$(this).addClass('on').siblings().removeClass('on');
    			$('#lanrenzhijia .list').stop().animate({top:-wHeight*index});
    		})
    		
    		//右侧导航固定
    		var defaultTop = (wHeight-$('#float-right a').height()*($('#float-right a').length+1))/2; // 悬浮框默认居中
    		console.log(defaultTop);
    		$(window).scroll(function(){
    		var offsetTop = defaultTop + $(window).scrollTop()+'px';
    		$('#float-right').animate({top:offsetTop},
    		{	duration: 600,	//滑动速度
    	     	queue: false    //此动画将不进入动画队列
    	    });
    							  
    	});
    	});
        $(function () {
            var container = $('#container');
            var list = $('#list');
            var buttons = $('#buttons span');
            var prev = $('#prev');
            var next = $('#next');
            var index = 1;
            var len = 5;
            var interval = 1500;
            var timer;


            function animate (offset) {
                var left = parseInt(list.css('left')) + offset;
                if (offset>0) {
                    offset = '+=' + offset;
                }
                else {
                    offset = '-=' + Math.abs(offset);
                }
                list.animate({'left': offset}, 300, function () {
                    if(left > -200){
                        list.css('left', -600 * len);
                    }
                    if(left < (-600 * len)) {
                        list.css('left', -600);
                    }
                });
            }

            function showButton() {
                buttons.eq(index-1).addClass('on').siblings().removeClass('on');
            }

            function play() {
                timer = setTimeout(function () {
                    next.trigger('click');
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 5) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-600);
                showButton();
            });

            prev.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(600);
                showButton();
            });

            buttons.each(function () {
                 $(this).bind('click', function () {
                     if (list.is(':animated') || $(this).attr('class')=='on') {
                         return;
                     }
                     var myIndex = parseInt($(this).attr('index'));
                     var offset = -600 * (myIndex - index);

                     animate(offset);
                     index = myIndex;
                     showButton();
                 })
            });

            container.hover(stop, play);

            play();

        });
    </script>
</head>
	<!--<body class="language-sc">-->
	<body>
	<div class="head">
	<div class="cont">
	    <div class="head-left"><a href="index.html"><img src="../images/logo.png" alt="" /></a></div>
		<div class="nav">
		<!--  
			<a class="logo" href="index.html"><img src="../images/sq.jpg" width="40" height="40"></a>
			<ul class="nav">
			<li><a class="a-t" href="index.html">网站首页</a></li>
			<li><a class="a-t" >我们服务</a></li>
			<li><a class="a-t">成功案例</a></li>
			<li><a class="a-t">关于我们</a></li>
			<li><a class="a-t">联系我们</a></li>
		</ul>
		-->
		<ul class="nav-main">
        <li>网站首页</li>
        <li id="li-1">关于我们<span></span></li>
        <li id="li-2">成功案例<span></span></li>
        <li id="li-3">我们服务<span></span></li>
        <li id="li-4">联系我们<span></span></li>
      </ul>
      <div id="box-1" class="hidden-box hidden-loc-index">
        <ul>
          <li>公司简介</li>
          <li>公司荣誉</li>
        </ul>
      </div>
      <div id="box-2" class="hidden-box hidden-loc-us">
        <ul>
          <li>金属字</li>
          <li>发光字</li>
          <li>灯箱</li>
          <li>水晶</li>
          <li>LED显示屏</li>
          <li>导视系统</li>
        </ul>
      </div>
      <div id="box-3" class="hidden-box hidden-loc-info">
        <ul>
          <li>金属字</li>
          <li>发光字</li>
          <li>灯箱</li>
          <li>水晶</li>
          <li>LED显示屏</li>
          <li>导视系统</li>
          <li>消费者服务</li>
        </ul>
      </div>
      <div id="box-4" class="hidden-box hidden-loc-info box04">
        <ul>
          <li>联系我们</li>
          <li>加入我们</li>
        </ul>
      </div>
	</div>
	</div>
	<div class="yanse"></div>
	</div>
	<!--  --><div id="image">
		<img src="../images/shangwu.jpg"/>
	</div>
	<div id="container">
    	<div id="list" style="left: -600px;">
        	<img src="../images/5.jpg" alt="1"/>
        	<img src="../images/1.jpg" alt="1"/>
        	<img src="../images/2.jpg" alt="2"/>
        	<img src="../images/3.jpg" alt="3"/>
        	<img src="../images/4.jpg" alt="4"/>
        	<img src="../images/5.jpg" alt="5"/>
        	<img src="../images/1.jpg" alt="5"/>
    	</div>
    	<div id="buttons">
        	<span index="1" class="on"></span>
        	<span index="2"></span>
        	<span index="3"></span>
        	<span index="4"></span>
        	<span index="5"></span>
    	</div>
    	<a href="javascript:;" id="prev" class="arrow">&lt;</a>
    	<a href="javascript:;" id="next" class="arrow">&gt;</a>
	</div>
	<div id="float-right">
	 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=329091412&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:329091412:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
    </div>
	<div id="footer">
	<div class="f-label">
	<div class="label-bottom">
		<div class="label-bottom-l">
			<a href="../use_clause/" class="first">使用条款</a>
			<a href="../services_network/">服务网络</a>
			<a href="https://open.sf-express.com/" class="last" target="_blank">开放平台</a>
			<a href="../Privacy_Policy/" class="last">|&nbsp;&nbsp;&nbsp;&nbsp;隐私政策</a>
		</div>
		<div class="label-bottom-r">©&nbsp;2017&nbsp;&nbsp;商云信息科技&nbsp;&nbsp;版权所有&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.miitbeian.gov.cn/" target="_blank">豫&nbsp;&nbsp;ICP&nbsp;&nbsp;备08034243号</a></div>
		<a id="_jvs_bottomimagelarge_anquan" target="_blank" href="http://webcert.cnmstl.net/cert/code?sn=c6cc6af3fac440c28901c15a104582fe">
      <img src="http://webcert.cnmstl.net/images/cert/code/officialbrand_small_h_img.jpg?sn=c6cc6af3fac440c28901c15a104582fe&amp;t=1476167429157" oncontextmenu="return false;"></a>
</div>
</div>
</div>
</body>
</html>